﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/assets/libs/layui/css/layui.css" />
    <link rel="stylesheet" href="/assets/module/admin.css?v=318">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <!-- 正文开始 -->
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <!-- 表格工具栏 -->
                <form class="layui-form toolbar">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">登录名称:</label>
                            <div class="layui-input-inline">
                                <input name="UserName" class="layui-input" placeholder="输入名称" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">IP地址:</label>
                            <div class="layui-input-inline">
                                <input name="IpAddress" class="layui-input" placeholder="输入IP" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">登录日期:</label>
                            <div class="layui-input-inline">
                                <input name="StartTime" class="layui-input icon-date" placeholder="开始时间"
                                       autocomplete="off" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <input name="EndTime" class="layui-input icon-date" placeholder="结束时间"
                                   autocomplete="off" />
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn icon-btn" lay-filter="loginRecordTbSearch" lay-submit perm-show="system:logapi:search">
                                <i class="layui-icon">&#xe615;</i>搜索
                            </button>
                        </div>
                    </div>
                </form>
                <!-- 数据表格 -->
                <table id="loginRecordTable" lay-filter="loginRecordTable"></table>
            </div>
        </div>
    </div>

    <!-- js部分 -->
    <script src="/assets/libs/jquery/jquery-3.2.1.min.js"></script>
    <script src="/assets/libs/layui/layui.js"></script>
    <script src="/assets/js/utils.js"></script>
    <script src="/assets/js/main.js"></script>
    <script>
        layui.use(['layer', 'form', 'table', 'util', 'laydate', 'tableX', 'admin', 'setter'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var util = layui.util;
            var laydate = layui.laydate;
            var tableX = layui.tableX;
            var admin = layui.admin;
            var setter = layui.setter;

            layuiTableSet();

            /* 渲染表格 */
            var insTb = table.render({
                elem: '#loginRecordTable',
                url: setter.baseServer + '/SystemManage/LogLogin/GetPageListJson',
                page: true,
                limit: 15,
                limits: [12, 24, 36, 48, 60],
                cols: [[
                    { field: 'LoginUser', title: '登录名', sort: true },
                    { field: 'IpAddress', title: 'IP地址', sort: true },
                    { field: 'IpLocation', title: 'IP位置' },
                    { field: 'Browser', title: '浏览器', sort: true },
                    { field: 'OS', title: '操作系统', sort: true },
                    {
                        field: 'LogStatus', title: '登录状态', sort: true, templet: function (d) {
                            if (d.LogStatus == 1) {
                                return '<span class="layui-badge layui-badge-blue">成功</span>';
                            } else {
                                return '<span class="layui-badge layui-badge-red">失败</span>';
                            }
                        }
                    },
                    { field: 'Remark', title: '操作信息' },
                    {
                        field: 'CreateTime', title: '登录时间', templet: function (d) {
                            return util.toDateString(d.CreateTime);
                        }, sort: true
                    }
                ]]
            });

            laydate.render({ elem: 'input[name=StartTime]', format: 'yyyy-MM-dd' });
            laydate.render({ elem: 'input[name=EndTime]', format: 'yyyy-MM-dd' });

            /* 表格搜索 */
            form.on('submit(loginRecordTbSearch)', function (data) {
                insTb.reload({ where: data.field, page: { curr: 1 } });
                return false;
            });

            /* 导出excel */
            $('#loginRecordExportBtn').click(function () {
                var checkRows = table.checkStatus('loginRecordTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要导出的数据', { icon: 2 });
                } else {
                    tableX.exportDataX({
                        cols: insTb.config.cols,
                        data: checkRows.data,
                        fileName: '登录日志'
                    });
                }
            });

            $("#RemoveAllLoginRecord").click(
                function () {
                    layer.confirm('确认是否清空数据？', { icon: 3, title: '提示' }, function (index) {
                        admin.req('/SystemManage/LogLogin/RemoveAllFormJson', function (res) {
                            if (res.Tag == 1) {
                                layer.msg("操作成功", { icon: 1 });
                                insTb.reload();
                            } else {
                                layer.msg(res.Message, { icon: 2 });
                            }
                        }, 'post');
                        layer.close(index);
                    });
                }
            );
        });
    </script>
</body>
</html>